<template>
  <view class="content">
    <view
      class="nav"
      style="width: 100%; position: fixed; top: 0; z-index: 100"
    >
      <view
        v-for="(item, index) in category"
        @click="SwitchVariety(item, index)"
        :key="index"
        :class="{ active: activeIndex === index }"
        >{{ item }}</view
      >
    </view>
    <view
      v-if="tableData.length == 0"
      class="cont justify-center flex align-center zanw mt-10"
      style="height: 100vh"
    >
      <text> 暂无该分类数据 </text>
    </view>
    <view v-else class="cont mt-10">
      <view
        class="item"
        v-for="(item, index) in tableData"
        :key="index"
        @click="handleTabs(item.Enterprise_Info_SerialNumber)"
      >
        <view class="left">
          <image
            v-if="item.Enterprise_Logo"
            class="rounded-circle border border-grey"
            style="height: 200rpx; width: 200rpx"
            :src="Domain_Business + item.Enterprise_Logo"
            mode=""
          >
          </image>
          <image
            v-else
            class="rounded-circle border border-grey"
            style="height: 200rpx; width: 200rpx"
            src="https://digital.essc.top/dist/zjl_icon/user.png"
            mode=""
          ></image>
        </view>
        <view class="right">
          <view class="title">{{ item.Enterprise_Name }}</view>
          <view class="cont2">
            <text
              v-for="(item2, index) in item.Traceability_Base_Name.split('|')"
              :key="index"
            >
              <text>{{ item2 ? item2 : "该公司暂无添加溯源基地" }}</text>
            </text>
            <text class="dz"
              ><text class="text-success">企业地址 : </text
              >{{
                item.Traceability_Base_Address
                  ? item.Traceability_Base_Address
                  : "未添加"
              }}</text
            >
            <text
              ><text class="text-success">认证情况:</text
              >{{ item.Authentication == 1 ? "已认证" : "未认证" }}</text
            >
          </view>
        </view>
      </view>
      <view class="text-center font-sm">{{ loadingText }}</view>
    </view>
    <view
      v-if="tag"
      @click="goTop"
      class="bg-white flex align-center"
      style="
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.5);
        position: fixed;
        right: 80rpx;
        bottom: 80rpx;
        justify-content: center;
      "
    >
      <image
        style="height: 80%; width: 80%"
        src="https://digital.essc.top/dist/zjl_icon/gotop.png"
        mode=""
      ></image>
    </view>
  </view>
</template>

<script>
const app = getApp();
import { getUserAllFQ } from "@/api/traceability.js";
export default {
  data() {
    return {
      scrollTop: 0,
      activeIndex: 0,
      Domain_Business: app.globalData.Domain_Business,
      ThemeColors: app.globalData.ThemeColors,
      form: {
        page: 1, //页数
        limit: 5, //每页数据条数
        User_Type: "",
      },
      tableData: [],
      total: 0,
      category: [
        //用户专区分类筛选
        "全部",
        "商协会",
        "买家",
        "卖家",
      ],
      timer: null,
      loadingText: "向下拉取加载更多",
      tag: false,
    };
  },
  onPageScroll(res) {
    this.scrollTop = res.scrollTop;
  },
  watch: {
    scrollTop: function (newValue, oldValue) {
      if (newValue > 800) {
        this.tag = true;
      } else {
        this.tag = false;
      }
    },
  },
  onLoad() {
    this.getList(this.form);
  },
  onReachBottom() {
    if (this.loadingText != "没有更多了") {
      this.form.page++;
      this.throttling();
    }
  },
  methods: {
    handleTabs(i) {
      uni.navigateTo({
        url: "/pages/Traceability/Base?Enterprise_Info_SerialNumber=" + i,
      });
    },
    goTop() {
      uni.pageScrollTo({
        scrollTop: 0,
      });
    },
    throttling(delay = 500) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.getList(this.form);
      }, delay);
    },
    async getList(data) {
      uni.showLoading({
        title: "加载中...",
      });
      this.loadingText = "加载中...";
      const res = await getUserAllFQ({
        data,
      });
      uni.hideLoading();
      this.tableData.push(...res.tableData);
      console.log(this.tableData);
      this.total = Number(res.limit);
      console.log(this.tableData);
      if (this.total == this.tableData.length) {
        this.loadingText = "没有更多了";
      } else {
        this.loadingText = "下拉加载更多";
      }
    },
    async SwitchVariety(i, index) {
      if (i === "全部") {
        this.form.User_Type = "";
      } else {
        this.form.User_Type = index - 1;
      }
      this.tableData = [];
      this.goTop();
      if (this.activeIndex == index) {
        return;
      }
      this.activeIndex = index;
      this.getList(this.form);
    },
    gobase(Enterprise_Info_SerialNumber) {
      uni.navigateTo({
        url:
          "/pages/Traceability/Base?Enterprise_Info_SerialNumber=" +
          Enterprise_Info_SerialNumber,
      });
    },
  },
};
</script>

<style lang="scss">
.content {
  width: 100%;
  background-color: #f5f5f5;

  .zanw {
    font-size: 24rpx;
    border-radius: 20rpx;
    width: 100%;
  }

  .nav {
    height: 88rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;

    // font-weight: bold;
    scroll-view {
      text-align: center;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .active {
      border-bottom: 2px solid #28a745;
    }
  }

  .cont {
    // height: calc(100vh - 0px);
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .item {
      border-radius: 20rpx;
      background-color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      margin: 0 0 30rpx 0;

      .title {
        font-size: 35rpx;
        font-weight: bold;
        margin: 10rpx 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .cont2 {
        font-size: 24rpx;
        display: flex;
        flex-direction: column;

        .text-container {
          width: 400rpx;
          height: 50rpx;
          white-space: nowrap;
          /* 防止文本换行 */
          overflow: hidden;
          /* 隐藏超出部分的文本 */
          text-overflow: ellipsis;
          /* 显示省略号 */
          display: inline-block;
        }

        .dz {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        text {
          display: inline-block;
          margin: 10rpx 0 0 0;
        }
      }
    }

    .left {
      width: 30%;
      margin: 0 10rpx;
      display: flex;
      justify-content: center;

      image {
        width: 100rpx !important;
        height: 100rpx !important;
      }
    }

    .right {
      width: 60%;
      margin: 0 0 0 20rpx;
      // padding: 20rpx;
      box-sizing: border-box;
    }
  }
}
</style>